<template>
  <div class="home">
    <van-search
  v-model="value"
  shape="round"
  background="red"
  placeholder="搜索"
   input-align="center"
/>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in list" :key="item">
    <img :src="item" alt="">
    </van-swipe-item>
</van-swipe>
<van-grid :column-num="3">
  <van-grid-item v-for="val in categories"  
  :icon="val.coverImg" 
  :text="val.name" 
  @click="$router.push('/fenlei')"
  
  />
</van-grid>

    <ul class="product_r">
      <li v-for="item in products" :key="item._id" @click="godetail(item._id)">
        <img :src="item.coverImg" alt="" />
        <div class="product_r">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqProducts,getcategories } from "../../api/product";
export default {
  data() {
    return {
      value:"",
      products: [],
      categories:[],
      list:[
        "https://gw.alicdn.com/imgextra/i3/O1CN01Am8Sra21Zaice06ax_!!6000000006999-2-tps-1130-500.png_570x10000.jpg_.webp",
        "https://img.alicdn.com/simba/img/TB1lUZLJVXXXXXtXFXXSutbFXXX.jpg",
        "https://gw.alicdn.com/imgextra/i3/6000000004461/O1CN01cdWU1A1ipBcgbQyiH_!!6000000004461-0-octopus.jpg_570x10000Q75.jpg_.webp",
        "https://gw.alicdn.com/tps/TB1x2eZLVXXXXbCXVXXXXXXXXXX-1130-500.jpg_570x10000Q75.jpg_.webp",
        "https://gw.alicdn.com/imgextra/i3/6000000007582/O1CN013xoPAQ25sbjoqPoGV_!!6000000007582-0-octopus.jpg_290x10000Q75.jpg_.webp"
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async initProducts() {
      const result = await reqProducts();
      console.log(result);
      this.products = result.products;
    },
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
    async listtypes(){
      const result = await getcategories();
      console.log(result);
      this.categories = result.categories;
    }
  },
  created() {
    this.initProducts();
    this.listtypes();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
img{
  width: 100%;
  height: 150px;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
.home {
  padding-bottom: 40px;
}
.product_r li {
  display: flex;
  padding: 10px;
}
.product_r li img {
  width: 80px;
  height: 80px;
  display: block;
}
.product_r li .product_r {
  flex: 1;
  padding-left: 10px;
}
.product_r li .product_r h3 {
  font-size: 13px;
  color: #888;
}
</style>
